<!--
*- coding = utf-8 -*-
#@Time : 2023/6/25 13:56
#@Author : 管茂良
#@File : index.vue
#@web  : www.php-china.com
#@Software: WebStorm
-->
<template>
  <div class="app-container">
    <TopNav :title="'用户名称'" style="position: relative;border-bottom:1px solid rgba(0,0,0,0.1)">
      <template #leftIcon>
        <SvgIcon @click="handleToBack" :size="'15'" :iconClass="'left'" />
      </template>
      <template #rightIcon>
        <SvgIcon @click="handleToChatInfo" :size="'15'" :iconClass="'more'" />
      </template>
    </TopNav>

<!--    聊天主题-->
    <view class="chat-style">
      <template :key="item.id+index" v-for="(item,index) in chatList">
        <view :class="'u-f chat-style-item '+(item.isMain?'chat-right':'chat-left')">
          <template v-if="item.isMain">
            <view class="chat-text-right margin-top-5">
              <view class="right-triangle"></view>
              {{item.text}}
            </view>
          </template>
          <view :class="'u-f u-f-ac u-f-ajc '+(item.isMain?'margin-left-15':'margin-right-15')" style="width: 100rpx;height:100rpx;border-radius: 50%;overflow: hidden">
            <u--image mode="aspectFill" width="100rpx" :height="'100rpx'" :src="item.headImg" />
          </view>
          <template v-if="!item.isMain">
            <view class="chat-text-left margin-top-5">
              <view class="left-triangle"></view>
              {{item.text}}
            </view>
          </template>
        </view>
      </template>
    </view>

<!--    聊天发送组件-->
    <view class="chat-input-box u-f">
        <view class="u-f u-f-ac u-f-ajc" style="width:100rpx;100rpx;">
          <SvgIcon @click="handleToVoice" style="color:black" :size="'20'" :iconClass="'horn'" />
        </view>
        <view class="u-f u-f-ac u-f-ajc" style="width:80%;min-width:460rpx;padding:0rpx 20rpx">
          <u-input class="input-style" v-model="form.text" placeholder="说点什么..." />
        </view>
        <view class="u-f" style="width:10%;min-width:160rpx">
          <view class="u-f u-f-ac u-f-ajc" style="width:110rpx;110rpx;">
            <SvgIcon @click="handleShowExpression" style="color:black" :size="'22'" :iconClass="'expression'" />
          </view>
          <view class="u-f u-f-ac u-f-ajc" style="width:110rpx;110rpx;" v-if="form.text==''">
            <SvgIcon @click="handleShowMore" style="color:black" :size="'22'" :iconClass="'plus'" />
          </view>
          <view class="u-f u-f-ac u-f-ajc" v-if="form.text!=''">
            <u-button size="mini" type="success">发送</u-button>
          </view>
        </view>
    </view>
  </div>
</template>

<script setup lang="ts">
import TopNav from "@/components/topNav/index"
import {handleGetCurInstance, handlePageTo} from "@/utils/utils";
import {onMounted, ref} from "vue";
import {useRoute,useRouter} from "vue-router";

let route = useRoute()
let router = useRouter()
let {globalProperties} = handleGetCurInstance()
let isLoading = ref(true)
let form = ref({
  text:""
})
let chatList = ref([{
  id:1,
  uid:1,
  isMain:false,
  headImg:"https://cdn.uviewui.com/uview/common/logo.png",
  text:"111111111",
  addTime:"",
  updateTime:"",
},{
  id:2,
  uid:2,
  isMain:true,
  headImg:"https://cdn.uviewui.com/uview/common/logo.png",
  text:"222222",
  addTime:"",
  updateTime:"",
},{
  id:3,
  uid:3,
  isMain:false,
  headImg:"https://cdn.uviewui.com/uview/common/logo.png",
  text:"33333333333",
  addTime:"",
  updateTime:"",
},{
  id:2,
  uid:2,
  isMain:true,
  headImg:"https://cdn.uviewui.com/uview/common/logo.png",
  text:"222222",
  addTime:"",
  updateTime:"",
},{
  id:3,
  uid:3,
  isMain:false,
  headImg:"https://cdn.uviewui.com/uview/common/logo.png",
  text:"33333333333",
  addTime:"",
  updateTime:"",
},{
  id:3,
  uid:3,
  isMain:false,
  headImg:"https://cdn.uviewui.com/uview/common/logo.png",
  text:"33333333333",
  addTime:"",
  updateTime:"",
},{
  id:4,
  uid:4,
  isMain:false,
  headImg:"https://cdn.uviewui.com/uview/common/logo.png",
  text:"4444444444444444444444444",
  addTime:"",
  updateTime:"",
}])

//显示表情包
const handleShowExpression = ()=>{

}

//显示更多
const handleShowMore = ()=>{

}

//语音
const handleToVoice = ()=>{

}
//返回首页
const handleToBack = ()=>{
  router.go(-1)
}
//跳转用户信息页
const handleToChatInfo = ()=>{
  handlePageTo("navigateTo","/pageCommon/chatInfo/chatSetting/index")
}

const handleInit = ()=>{
  globalProperties.$loading.show()
  globalProperties.$modal.show({
    title:"3333",
    asyncClose:true,
  }).then((res:any)=>{
    console.log(res);
    return res;
  }).then((res:any)=>{
    console.log(res.hide(),33333);
  })
  globalProperties.$loading.show()
}

onMounted(async ()=>{

})

</script>

<style scoped lang="less">
.chat-style{
  overflow-y:auto;
  //#ifdef  H5
  height:calc(100vh - 220rpx);
  //#endif
  //#ifdef  APP-PLUS
  height:calc(100vh - 300rpx);
  //#endif
  background:@--top-nav-light-one;
  padding:0rpx 16rpx;
  &-item{
    padding:20rpx 0rpx;
  }
  .chat-left{
    width:100%;
    justify-content: flex-start;
  }
  .chat-right{
    width:100%;
    justify-content: flex-end;
  }
  .chat-text-right{
    padding:14rpx;
    height:100%;
    background:#A8E97A;
    position: relative;
    .right-triangle{
      position:absolute;
      right:-40rpx;
      top:2rpx;
      border: 10px solid transparent;
      border-left: 10px solid #A8E97A;
    }
  }
  .chat-text-left{
    padding:14rpx;
    height:100%;
    background:white;
    position: relative;
    .left-triangle{
      position:absolute;
      left:-40rpx;
      top:2rpx;
      border: 10px solid transparent;
      border-right: 10px solid white;
    }
  }
}
.chat-input-box{
  padding:0rpx 20rpx;
  width:100%;
  height:120rpx;
  background:#f6f6f6;
}
.input-style{
  /deep/ .u-input__input{
    background:white;
    padding:8rpx 10rpx;
    font-size:20rpx;
    border:0px;
    outline:none;
    color:black;
    min-height:50rpx!important;
    line-height: 50rpx!important;
  }
}
</style>
